<template>
    <view class="container">

        <MyNavigation ref="navBar"></MyNavigation>
        <!--标签页 -->
        <view class="tabs">
            <view class="tab_head">
                <block v-for=" (item, index)  in   tabList " :key="index">
                    <view class="tab_head_item" :class="{ active: current === index }" :data-value="index"
                        @tap="handleClick">
                        <text> {{ item.title }}</text>
                    </view>

                </block>
            </view>

            <block v-for="(page, index) in tabPageList" :key="index">
                <scroll-view scroll-y="true" class="tab_body" v-if="current === index">
                    <text>{{ page.title }}</text>
                    <block v-for="(item, index ) in type_dishList" :key="index">
                        <view class="tab_body_item">

                            <view class="food_type_title">{{ item.title }}</view>

                            <view class="food_type_dishList">
                                <block v-for="(dish, index1) in item.dishes" :key="index1">
                                    <view class="food_type_dish" @tap="toSearchPage" :data-value=dish.title>
                                        <image :src=dish.imgSrc />
                                        <text>{{ dish.title }}</text>
                                        <view class="cover"></view>

                                    </view>
                                </block>
                            </view>

                        </view>
                    </block>

                </scroll-view>
            </block>
        </view>

    </view>
</template>

<script setup>
    import { ref, onMounted ,inject} from 'vue';
    import './dishClassify.scss';
    import { AtTabs, AtTabsPane } from 'taro-ui-vue3'
    import Taro, { useRouter } from "@tarojs/taro";
    import MyNavigation from '../../../components/myNavigation.vue';

    // 注入配置
    const config = inject('config');
    const baseUrl = config.baseUrl; // 从全局配置中读取 baseUrl


    // 导航栏信息
    const navBar = ref(null);

    const navigationHome = () => {
        console.log('返回主页');
        Taro.switchTab({
            url: '../../../pages/index/index',
        });
    };


    const setNavBar = () => {
        if (navBar.value) {
            navBar.value.navigationHome = navigationHome;
            navBar.value.navigationTitle = '菜谱分类';
        }
    }

    onMounted(() => {
        setNavBar();
    });


    // 当前标签页
    const current = ref(0);

    // 标签页名称列表
    const tabList = [
        { title: '热门专题' },
        { title: '烘培' },
        { title: '甜品饮料' },
        { title: '肉类' },
        { title: '蔬菜水果' },
        { title: '汤粥主食' },
        { title: '口味特色' },
        { title: '水产' },
        { title: '蛋奶豆制品' },
        { title: '米面干果' },
        { title: '腌咸制品' },
        { title: '节日节气' },

    ];

    //标签页页面列表
    const tabPageList = [
        {
            title: "页面一",
            // 更具不同的页面传入不同的list显示不同的结果
            dishList: ['']
        },
        {
            title: "页面2",
            // 更具不同的页面传入不同的list显示不同的结果
            dishList: ['']
        },
        {
            title: "页面3",
            // 更具不同的页面传入不同的list显示不同的结果
            dishList: ['']
        },
        {
            title: "页面4",
            // 更具不同的页面传入不同的list显示不同的结果
            dishList: ['']
        },
        {
            title: "页面5",
            // 更具不同的页面传入不同的list显示不同的结果
            dishList: ['']
        },
        {
            title: "页面6",
            // 更具不同的页面传入不同的list显示不同的结果
            dishList: ['']
        },
        {
            title: "页面7",
            // 更具不同的页面传入不同的list显示不同的结果
            dishList: ['']
        },
        {
            title: "页面8",
            // 更具不同的页面传入不同的list显示不同的结果
            dishList: ['']
        },
        {
            title: "页面9",
            // 更具不同的页面传入不同的list显示不同的结果
            dishList: ['']
        },
        {
            title: "页面10",
            // 更具不同的页面传入不同的list显示不同的结果
            dishList: ['']
        },
        {
            title: "页面11",
            // 更具不同的页面传入不同的list显示不同的结果
            dishList: ['']
        },
        {
            title: "页面12",
            // 更具不同的页面传入不同的list显示不同的结果
            dishList: ['']
        },
    ]

    //菜系列表
    const type_dishList = [
        {
            title: '菜式',
            dishes: [
                {
                    imgSrc: "https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp",
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                }, {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },]
        },
        {
            title: '特殊场合',
            dishes: [
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                }, {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },]
        },
        {
            title: '特色美食',
            dishes: [
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                }, {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },]
        },
        {
            title: '功效',
            dishes: [
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                }, {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },]
        },
        {
            title: '人群',
            dishes: [
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },
                {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                }, {
                    imgSrc: 'https://s4.cdn.jiaonizuocai.com/caipu/201603/3010/301011441374.jpg/MjUweDI1MA.webp',
                    title: '快手菜'
                },]
        },


    ]

    // 切换标签页函数
    const handleClick = (e) => {
        current.value = e.currentTarget.dataset.value;
    };


    // 去搜索页面
    const toSearchPage = (e) => {
        const searchValue = e.currentTarget.dataset.value;
        Taro.navigateTo({
            url: `../search/search?searchValue=${searchValue}`,
        })
    };

</script>